<template>
		<button @click="test1">测试1</button><br />
		用户名:<input type="text" v-model="username"/>
		密码:<input type="text" v-model="password"/>
		年龄:<input type="text" v-model="age"/>
		<br />
		<button @click="test2">测试2(get方式)</button><br />
		<button @click="test3">测试3(post 表单数据)</button><br />
		<button @click="test4">测试4(post json数据)</button><br />
		<button @click="test5">测试5(调用封装的方法)</button>
		<button @click="test7">测试7(注册)</button>
</template>

<script>
	
	import axios from 'axios'
	import {login,register} from '../api/user.js'
	
	export default{
		data(){
			return {
				username: "admin",
				password: "123456",
				age:18
			}
		},
		methods:
		{
			// axios 默认的请求方式 application/json
			// {
				// username: "admin",
				// password: "123456"
			// }                   
			// 普通表单请求 application/x-www-form-unlencoded
			// username=admin&password=123456
			// 文件上传   mulitpart/form-data
			
			
			test7()
			{
				register(this.username,this.password,this.age)
				.then(r=>{
					console.log(r);
				})
			},
			
			test5()
			{
				login(this.username,this.password)
				.then(r=>{
					console.log(r);
				})
			}
			,
			
			test4(){
				console.log("网络请求 post");
				
				var p = axios.create().post("http://localhost:8080/test4",
					{
						username:this.username,
						password:this.password
					}
				);
				p.then(result=>{
					console.log(result.data);
				})
				.catch(error=>{
					console.log(error);
				})
				
			},
			test3(){
				console.log("网络请求 post");
				var p = axios.create({
					headers:{
						"Content-type":"application/x-www-form-urlencoded"
					}
				}).post("http://localhost:8080/test3",
				{
						username:this.username,
						password:this.password,
				});
				p.then(result=>{
					console.log(result.data);
				})
				.catch(error=>{
					console.log(error);
				})
			},
			test2(){
				
				console.log("网络请求");
				var p = axios.create().get("http://localhost:8080/test2",{
					params:{
						username:this.username,
						password:this.password
					}
				});
				p.then(result=>{
					console.log(result.data);
				})
				.catch(error=>{
					console.log(error);
				})
				
			},
			test1(){
				
				console.log("网络请求");
				var p = axios.create().get("http://localhost:8080/test1");
				// 返回一个Promise对象 ，js中解决异步编程语法对象
				console.log(p);
				
				// CORS 跨域问题
				// 前端端口 5173 访问 后端 端口8080  浏览器认位有安全问题
				// Access to XMLHttpRequest at 'http://localhost:8080/test1' from origin 'http://localhost:5173' has been blocked by CORS policy:
				 // No 'Access-Control-Allow-Origin' header is present on the requested resource.
				 
				 // .then( 正常结果回来的处理函数)
				// p.then(function(result){
				// 	console.log(result.data);
				// })
				// .cath( 出现异常时的处理)
				// .catch(function(error){
				// 	console.log(error);
				// })
				
				// lamda
				p.then(result=>{
					console.log(result.data);
				})
				.catch(error=>{
					console.log(error);
				})
				 
				 
			}
		}
	}
</script>

<style>
</style>